<template>
  <div>
    <AForm :model="searchFrom" class="erp-search-form">
      <ARow class="grid-demo" :gutter="10">
        <ACol :span="6">
          <AFormItem hide-label>
            <AInput v-model="searchFrom.userName" placeholder="用户名" allow-clear />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem hide-label>
            <AInput v-model="searchFrom.phoneNumber" placeholder="手机账号" allow-clear />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem hide-label>
            <AInput v-model="searchFrom.userAccount" placeholder="用户账号" allow-clear />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem hide-label>
            <ASelect v-model="searchFrom.enable" placeholder="启用" allow-clear>
              <AOption label="禁用" :value="0"></AOption>
              <AOption label="启用" :value="1"></AOption>
            </ASelect>
          </AFormItem>
        </ACol>
      </ARow>
    </AForm>
    <ACard>
      <div class="erp-mb-10 w100 erp-search-btn-box">
        <ASpace>
          <AButton type="primary" @click="onSearch">
            <template #icon>
              <icon-search />
            </template>
          </AButton>
          <ATooltip content="清空筛选项" position="top">
            <AButton type="dashed" @click="onReset">
              <template #icon>
                <icon-refresh />
              </template>
            </AButton>
          </ATooltip>
          <AButton v-if="isAuth([4])" type="outline" @click="openEdit('新增')">新增</AButton>
        </ASpace>
        <ASpace></ASpace>
      </div>
      <ATable
        v-model:selected-keys="selectedRowKeys"
        :pagination="false"
        :data="tableData"
        :bordered="{ cell: true }"
        column-resizable
        size="small"
        row-key="employeeId"
      >
        <template #columns>
          <ATableColumn title="用户名" data-index="userName" :width="100"></ATableColumn>
          <ATableColumn title="用户账号" data-index="userAccount" :width="100"></ATableColumn>
          <ATableColumn title="手机号码" data-index="phoneNumber" :width="100"></ATableColumn>
          <ATableColumn title="角色" data-index="isAdmin" :width="100">
            <template #cell="{ record }">
              <div>{{ role[record.isAdmin] }}</div>
            </template>
          </ATableColumn>
          <ATableColumn title="启用" data-index="isAdmin" :width="100">
            <template #cell="{ record }">
              <ASwitch
                v-model="record.enable"
                :checked-value="1"
                :unchecked-value="0"
                checked-color="#14C9C9"
                unchecked-color="#F53F3F"
                @change="editInfo(record)"
              ></ASwitch>
            </template>
          </ATableColumn>
          <ATableColumn v-if="isAuth([4])" title="操作" :width="150" fixed="right" align="center">
            <template #cell="{ record }">
              <ASpace>
                <AButton type="primary" size="mini" @click="rowEvent(record, 'edit')">
                  修改
                </AButton>
              </ASpace>
            </template>
          </ATableColumn>
        </template>
      </ATable>
      <div class="arco-table-pagination">
        <APagination
          :total="pageParam.totalCount"
          :page-size="pageParam.pageSize"
          show-total
          @change="(page: number) => tableEvent('page-change', page)"
        />
      </div>
    </ACard>
    <EditPopupForm
      v-model:visible="editModal"
      :title="editModalTitle"
      :check-data="rowData"
      @reload="getTableData"
    ></EditPopupForm>
  </div>
</template>

<script lang="ts" setup>
import EditPopupForm from './editPopupForm.vue'
import { isAuth } from '@renderer/utils/auth'
import {
  AccountListSearch,
  AccountRes,
  editAccount,
  getAccountPageList
} from '@renderer/api/userManage'
import { Message } from '@arco-design/web-vue'

const searchFrom = ref<AccountListSearch>({
  enable: '',
  userName: '',
  phoneNumber: '',
  userAccount: undefined
})
const editModal = ref(false)
const editModalTitle = ref('新增')
const tableData = ref<AccountRes[]>([])
const role = {
  1: '管理员',
  2: '生产人员',
  3: '财务人员'
}
const pageParam = reactive({
  currentPage: 1,
  pageSize: 20,
  totalCount: 0
})
const selectedRowKeys = ref<string[]>([])

onMounted(() => {
  getTableData()
})

async function getTableData() {
  const res = await getAccountPageList({ ...searchFrom.value, ...pageParam })
  tableData.value = res.data.list
  pageParam.totalCount = res.data.totalCount!
}

const onSearch = () => {
  pageParam.currentPage = 1
  getTableData()
}

function onReset() {
  searchFrom.value = {
    enable: '',
    userName: '',
    phoneNumber: ''
  }
  pageParam.currentPage = 1
  pageParam.pageSize = 20
  getTableData()
}

function tableEvent(type: 'page-change', param: any) {
  switch (type) {
    case 'page-change':
      pageParam.currentPage = param
      getTableData()
      break

    default:
      break
  }
}

function editInfo(record: AccountRes) {
  editAccount(record).then(() => {
    Message.success('修改成功')
  })
}

function openEdit(title: string) {
  rowData.value = {}
  editModalTitle.value = title
  editModal.value = true
}

const rowData = ref({})

function rowEvent(row: AccountRes, type: 'del' | 'copy' | 'edit' | 'print') {
  switch (type) {
    case 'copy':
      rowData.value = row
      editModalTitle.value = '新增'
      editModal.value = true
      break
    case 'edit':
      rowData.value = row
      editModalTitle.value = '修改'
      editModal.value = true
      break

    default:
      break
  }
}
</script>
<style lang="less" scoped>
.erp-search-btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
